<template>

<div id="app">

    <!-- 用组件的时候使用他的名字作为标签名即可 -->
    <!-- 但是建议做拆分，因为h5对html标签的规范是多个单词是小的且要用-连接 -->
    <!-- <MyHeader /> -->
    <!-- <my-header /> -->
    <!-- 目前而言单标签和双标签，看自己喜好，想写哪个就写哪个 -->
    <my-header></my-header>

    <my-main></my-main>

    <!-- <h1>哈哈哈哈嘿</h1>
    <p>我是App.vue</p> -->

    <!-- <ul> -->
      <!-- 
          key的值只能给字符串类型的和数字类型的
          建议：有唯一值给唯一值，没有唯一值给下标
       -->
      <!-- <li v-for="item in list" :key="item.id">{{ item }}</li>
    </ul> -->
</div>
  
</template>

<script>
// 导入组件
import MyHeader from './components/MyHeader.vue'
// 在脚手架里如果省略.vue他也会自动找.vue后缀
import MyMain from './components/MyMain'

export default {
  // 注册组件
  components: {
    MyHeader,
    MyMain
  },
  data() {
    return {
      list: [
        { id: 11, name: '张三'},
        { id: 16, name: '李四'},
        { id: 64, name: '王五'},
      ]
    }
  },
}
</script>

<style>

</style>
